<template>
    <div class="help-log-page" v-loading="loading">
        <p class="title">{{ content.name }}</p>
        <p class="date">{{ content.date }}</p>
        <div class="content" v-html="content.content"></div>
        <el-image-viewer
                v-if="showImageViewer"
                :on-close="onImageViewerClose"
                :url-list="imageViewerUrlList"
                :initial-index="imageViewerIndex"></el-image-viewer>
    </div>
</template>

<script>
import ImageViewer from 'element-ui/packages/image/src/image-viewer';

export default {
    components: {
        ElImageViewer: ImageViewer,
    },
    data() {
        return {
            content: '',
            loading: false,

            showImageViewer: false,
            imageViewerUrlList: [],
            imageViewerIndex: 0,
        };
    },
    methods: {
        fetch() {
            this.loading = true;
            API.get(`../product_log/${this.id}`).then(res => {
                this.content = res;
                const title = {
                    ...this.$store.state.helpTitle,
                    ...{
                        two: {
                            title: '产品日志',
                            path: '/helps/container/log/more',
                        },
                        three: {
                            title: res.name,
                        },
                    },
                };
                this.$store.commit('setHelpTitle', title);
                this.$nextTick(() => {
                    const videoNodes = window.document.querySelectorAll('.content video');
                    videoNodes.forEach(video => {
                        video.setAttribute('controlsList', 'nodownload');
                    });
                    const imgNodes = window.document.querySelectorAll('.content img');
                    const imageViewerUrlList = [];
                    imgNodes.forEach(img => {
                        const src = img.getAttribute('src');
                        imageViewerUrlList.push(src);
                        img.setAttribute('title', '可点击查看大图');
                        img.outerHTML = `<div class="img-wrapper">
                            ${ img.outerHTML }
                            <span class="img-title">（可点击查看大图）</span>
                        </div>`;
                    });
                    this.imageViewerUrlList = imageViewerUrlList;
                });
            }).finally(() => this.loading = false);
        },

        onImageViewerClose() {
            this.showImageViewer = false;
        },
    },
    mounted() {
        const id = this.$route.query.id;

        if (id) {
            this.id = id;
            this.fetch();
        }

        window.document.querySelector('.content').addEventListener('click', e => {
            if (e.target.nodeName.toLowerCase() === 'img') {
                this.showImageViewer = true;
                this.imageViewerIndex = this.imageViewerUrlList.indexOf(e.target.getAttribute('src'));
            }
        });
    },
    destroyed() {
        const title = {
            ...this.$store.state.helpTitle,
            ...{
                three: {
                    title: '',
                },
            },
        };
        this.$store.commit('setHelpTitle', title);
    },
};
</script>

<style lang="scss">
.help-log-page {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 50px;

    @media (max-width: 960px) {
        padding: 0 20px 50px;
    }

    .title {
        font-size: 24px;
        font-weight: 500;
        color: rgb(37, 37, 37);
        line-height: 33px;
        margin-bottom: 5px;

        @media (max-width: 960px) {
            font-size: 18px;
            line-height: 25px;
            margin-bottom: 3px;
        }
    }

    .date {
        color: rgb(180, 180, 180);
        font-size: 13px;

        @media (max-width: 960px) {
            font-size: 12px;
        }
    }

    .content {
        margin-top: 46px;
        color: rgb(74, 74, 74);
        line-height: 22px;

        img {
            cursor: pointer;
        }
        .img-wrapper {
            text-align: center;
        }
        .img-title {
            display: inline-block;
            font-size: 12px;
            color: #999;
            margin-top: 0.25rem;
            margin-bottom: 1.25rem;
        }

        p {
            margin: 0.75rem 0 !important;
            line-height: 1.6 !important;
        }

        @media (max-width: 960px) {
            margin-top: 16px;

            p, span {
                font-size: 14px !important;
                line-height: 20px !important;
                padding: 0 !important;
            }

            p {
                margin: 0 0 16px !important;
            }

            img {
                width: 100% !important;
                height: auto !important;
            }
        }
    }
}
</style>
